<template>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ date.title }}</span>
          <el-tag>{{ date.timer }}</el-tag>
        </div>
      </template>
      <template #default>
        <h1 class="h-20 text-gray-500 text">{{ date.num }}</h1>
        <div class="flex justify-between ">
        <span class="text-gray-400">{{ date.bottomTitle }}</span>
        <span>{{ date.bottomNum }}</span>
        </div>
      </template>
    </el-card>
  </template>
  
  <script>
import { defineComponent, reactive, ref, toRaw } from 'vue'
export default defineComponent({
props: ['cardDate'],
    setup(props,context) {
        const date = props.cardDate
        return {
            date
        }
    }
})
  </script>
  <style scoped>

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .text {
    font-size: 14px;
  }
  
  .item {
    margin-bottom: 18px;
  }
  
  .box-card {
    width: 480px;
  }
  </style>
  